<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据预览</title>
  <!-- 重置样式，使得各浏览器样式更一致 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <!-- vant样式 -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" />
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="../style/common.css" />
</head>

<body>
  <div class="road-survey-view" id="DataView">
    <div class="road-survey-view-content">
      <table style="width: 100%;" :style="scaleTable">
        <tr class="center">
          <th :colspan="4 + (headerList.length > 2 ? headerList.length - 3 : 0)">路口现场勘察记录表</th>
        </tr>
        <tr class="center">
          <th>勘查时间</th>
          <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">{{baseMsg.time}}</td>
          <th>记录人</th>
          <td>{{baseMsg.user}}</td>
        </tr>
        <tr class="center">
          <th>路口名称</th>
          <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">
            {{baseMsg.roadName}}</td>
          <th>路口经纬度</th>
          <td>{{baseMsg.roadPosition}}</td>
        </tr>
        <tr class="center">
          <th>点位形状</th>
          <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">
            {{findValueByKey(baseMsg.roadShape, ROAD_SHAPE)}}
            <template>
              {{baseMsg.roadShapeExt}}
            </template>
          </td>
          <th>点位属性</th>
          <td>
            {{findValueByKey(baseMsg.dotType, DOT_TYPE)}}
          </td>
        </tr>
        <tr class="center" v-if="!isRoadWay">
          <th>信号机品牌</th>
          <td :colspan="3 + (headerList.length > 2 ? headerList.length - 3 : 0)">
            {{findValueByKey(baseMsg.signalType, SIGNAL_TYPE)}}
            <template>
              {{baseMsg.signalTypeExt}}
            </template>
          </td>
        </tr>
        <tr v-if="headerList.length > 1">
          <th colspan="2">方向</th>
          <template v-for="item in headerList.slice(1)">
            <th>{{item.value}}</th>
          </template>
        </tr>
        <template v-for="item in showDirectionConfig">
          <tr v-for="(child, index) in item.child">
            <th :rowspan="item.child.length" v-if="index === 0" :colSpan="item.child.length === 1 ? 2 : 1">
              {{item.value}}</th>
            <th v-if="item.child.length !== 1">{{child.value}}</th>
            <template v-for="dirItem in directionMsg">
              <td>
                <template v-if="!(child.hiddenKey && dirItem[child.relativeKey] === child.hiddenKey)">
                  <div v-if="child.key==='motorwayNumber'" style="display: flex; flex-wrap: wrap;">
                    <template v-for="(road, index) in dirItem.motorwayList">
                      <div class="direction-img-content" style="height: 42px;">

                        <template v-for="item in road.direction" :key="item.key">
                          <div :class="['direction-img-item direction-img-table-item active']">
                            <img :src="`../images/active-${findValueByKey(item, DIRECTION_IMAGE)}.png`" />
                            <div style="font-size: 12px;">{{road.width}}</div>
                          </div>
                        </template>
                        <div class="direction-splite" v-if="index < dirItem.motorwayList.length - 1"></div>
                      </div>
                    </template>
                  </div>
                  <template v-else-if="child.type===CONTENT_TYPE.RADIO">
                    <div>
                      {{findValueByKey(dirItem[child.key], child.option)}}
                      {{dirItem[child.key + 'Ext']}}
                    </div>
                  </template>
                  <template v-else-if="child.type===CONTENT_TYPE.CHECKBOX">
                    <span v-for="(item, index) in dirItem[child.key]">
                      {{findValueByKey(item, child.option)}}
                      <template v-if="item === 'other'">
                        {{dirItem[child.key + 'Ext']}}
                      </template>
                      <span v-if="index < dirItem[child.key].length - 1">,</span>
                    </span>
                  </template>
                  <template v-else>
                    <van-field v-model="dirItem[child.key]" readonly input-align="left"
                      :type="child.inputType || 'number'" autosize></van-field>
                  </template>
                </template>
              </td>
            </template>
          </tr>
        </template>
        <tr class="center">
          <th :colspan="2">周围建筑物</th>
          <td :colspan="2 + (headerList.length > 2 ? headerList.length - 3 : 0)">
            <span v-for="(item, index) in baseMsg.aroundBuilding">
              {{findValueByKey(item, AROUND_BUILDING)}}
              <span v-if="item === 'other'">
                {{baseMsg.aroundBuildingExt}}
              </span>
              <span v-if="index < baseMsg.aroundBuilding.length - 1">,</span>
            </span>
          </td>
        </tr>
        <tr>
          <th :colspan="2">拍照</th>
          <td :colspan="2 + (headerList.length > 2 ? headerList.length - 3 : 0)">
            用水印相机拍照留存每个勘察路口的各个方向车道、电警杆、信号灯杆，水印要标注清楚路口、方向。
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<script src="../js/methods.js"></script>
<script>
  const { createApp, ref, nextTick, reactive, onMounted, onUnmounted, computed, watch } = Vue
  const app = Vue.createApp({
    setup() {
      // 顶部选择器
      const headerList = ref([baseHeader])

      // 基础信息
      const baseMsg = ref(JSON.parse(JSON.stringify(base)))

      // 方向信息的全量
      const directionMsg = ref([])

      // local获取
      const getLocalMsg = () => {
        baseMsg.value = getLocal('baseMsg') || JSON.parse(JSON.stringify(base))
        directionMsg.value = getLocal('directionMsg') || []
        headerList.value = getLocal('headerList') || [baseHeader]
      }

      const scaleTable = computed(() => {
        const scale = parseFloat(window.innerWidth) / 800 - 0.01
        return `transform: scale(${scale}); transform-origin: top left; overflow: auto`
      })

      /**
       * 是否路段
       * 如果点位形状选择了“路段”，则后面不显示“信号机品牌”、“信号灯杆”、“机动车信号灯”等栏的输入项
       */
      const isRoadWay = computed(() => {
        return baseMsg.value.roadShape === LD_KEY
      })

      // 需要填写的数据，因为路段时候会过滤一些信息
      const showDirectionConfig = computed(() => {
        let list = JSON.parse(JSON.stringify(DIRECTION_CONFIG))
        list = list.filter(item => !(item.hiddenKey?.includes(LD_KEY) && isRoadWay.value))
        return list
      })

      onMounted(async () => {
        getLocalMsg()
      })

      return {
        // 外部导入的内容导出
        ROAD_SHAPE, DOT_TYPE, SIGNAL_TYPE, AROUND_BUILDING, CONTENT_TYPE,
        DIRECTION_IMAGE,
        // 基础定义的内容导出
        headerList, baseMsg, directionMsg,
        // computed定义的计算属性
        scaleTable, isRoadWay, showDirectionConfig,
        findValueByKey,
      }
    }
  })
  app.use(vant);
  app.use(vant.Lazyload);
  app.mount("#DataView");
</script>

</html>